<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui">
    <body>
        <ui:composition template="/WEB-INF/templates/default_template.xhtml">
            <ui:define name="contenido">
                <h:panelGrid cellspacing="15" width="100%">
                    <h:panelGrid columns="2">
                        <p:graphicImage value="/resources/img/icono-locacion2.png" />
                        <h:outputText value="Locaciones" styleClass="titulo" />
                    </h:panelGrid>
                    <p:panel>
                        <h:form id="formLocaciones">
                            <h:panelGrid cellspacing="5" width="100%">
                                <h:panelGrid columns="3">
                                    <h:outputText value="Locación: " styleClass="etiqueta" />
                                    <h:outputText value="Categoria: " styleClass="etiqueta" />
                                    <p:spacer />
                                    <p:inputText value="#{locacionBean.nombre}" size="50" />
                                    <p:selectOneMenu value="#{locacionBean.codCategoria}">
                                        <f:selectItem itemLabel="- TODOS -" itemValue="0" />
                                        <f:selectItems value="#{locacionBean.categorias}" var="categoria" itemLabel="#{categoria.nomCategoria}" itemValue="#{categoria.codCategoria}" />
                                    </p:selectOneMenu>
                                    <p:commandButton value="Buscar" action="#{locacionBean.buscar()}" update="dataTable" icon="icono-buscar" />
                                </h:panelGrid>
                                <p:commandButton value="Nueva Locación" action="#{locacionBean.nuevo()}" update=":formLocacion" oncomplete="registrar.show();" icon="icono-agregar" />
                                <p:dataTable id="dataTable" value="#{locacionBean.locaciones}" var="locacion" paginator="true" rows="10" rowsPerPageTemplate="10,20,50" paginatorPosition="bottom" emptyMessage="No hay datos para mostrar" rowStyleClass="encima">
                                    <p:column headerText="Nombre">
                                        <h:outputText value="#{locacion.nomLocacion}" />
                                    </p:column>
                                    <p:column headerText="Categoria">
                                        <h:outputText value="#{locacion.categoria.nomCategoria}" />
                                    </p:column>
                                    <p:column headerText="Dirección">
                                        <h:outputText value="#{locacion.strDireccion}" />
                                    </p:column>
                                    <p:column headerText="Distrito">
                                        <h:outputText value="#{locacion.distrito.nomDistrito}" />
                                    </p:column>
                                    <p:column headerText="Alquiler">
                                        <h:outputText value="S/. #{locacion.dblAlquiler}" />
                                    </p:column>
                                    <p:column headerText="Contacto">
                                        <h:outputText value="#{locacion.nomContacto}" />
                                    </p:column>
                                    <p:column width="90">
                                        <p:commandButton title="Fotos" oncomplete="fotos.show();" action="#{locacionBean.cargarFotos()}" update=":formFotos" icon="icono-foto">
                                            <f:setPropertyActionListener target="#{locacionBean.locacion}" value="#{locacion}" />
                                        </p:commandButton>
                                        <p:commandButton title="Editar" oncomplete="registrar.show();" update=":formLocacion" icon="icono-editar">
                                            <f:setPropertyActionListener target="#{locacionBean.locacion}" value="#{locacion}" />
                                        </p:commandButton>
                                        <p:commandButton title="Eliminar" icon="icono-eliminar" action="#{locacionBean.eliminar(locacion)}">
                                            <p:confirm header="ELIMINAR LOCACION" message="Va a eliminar el registro. ¿Desea continuar?" icon="icono-eliminar" />
                                        </p:commandButton>
                                    </p:column>
                                </p:dataTable>
                            </h:panelGrid>
                        </h:form>
                        <h:form id="formLocacion">
                            <p:dialog widgetVar="registrar" header="REGISTRO DE LOCACIÓN" resizable="false" modal="true">
                                <h:panelGrid>
                                    <h:outputText value="Nombre: " styleClass="etiqueta" />
                                    <p:inputText value="#{locacionBean.locacion.nomLocacion}" size="50" />
                                    <h:outputText value="Categoria: " styleClass="etiqueta" />
                                    <p:selectOneMenu value="#{locacionBean.locacion.categoria.codCategoria}">
                                        <f:selectItem itemLabel="SELECCIONAR" itemValue="0" />
                                        <f:selectItems value="#{locacionBean.categorias}" var="categoria" itemLabel="#{categoria.nomCategoria}" itemValue="#{categoria.codCategoria}" />
                                    </p:selectOneMenu>
                                    <h:outputText value="Dirección: " styleClass="etiqueta" />
                                    <p:inputText value="#{locacionBean.locacion.strDireccion}" size="50" />
                                    <h:outputText value="Distrito: " styleClass="etiqueta" />
                                    <p:selectOneMenu value="#{locacionBean.locacion.distrito.codDistrito}">
                                        <f:selectItem itemLabel="SELECCIONAR" itemValue="0" />
                                        <f:selectItems value="#{locacionBean.distritos}" var="distrito" itemLabel="#{distrito.nomDistrito}" itemValue="#{distrito.codDistrito}" />
                                    </p:selectOneMenu>
                                    <h:outputText value="Costo de Alquiler: " styleClass="etiqueta" />
                                    <p:inputText value="#{locacionBean.locacion.dblAlquiler}" size="20" />
                                    <h:outputText value="Contacto: " styleClass="etiqueta" />
                                    <p:inputText value="#{locacionBean.locacion.nomContacto}" size="50" />
                                    <h:outputText value="Telf. Contacto: " styleClass="etiqueta" />
                                    <p:inputText value="#{locacionBean.locacion.strTelefono}" size="30" />
                                </h:panelGrid>
                                <p:separator />
                                <h:panelGrid columns="2">
                                    <p:commandButton value="GUARDAR" action="#{locacionBean.registrar()}" update=":formLocaciones:dataTable :mensaje" icon="icono-guardar" />
                                    <p:commandButton value="Cancelar" type="button" onclick="registrar.hide();" icon="icono-salir" />
                                </h:panelGrid>
                            </p:dialog>
                        </h:form>
                        <h:form id="formFotos">
                            <p:dialog widgetVar="fotos" header="REGISTRO DE FOTOS" resizable="false" modal="true" width="600">
                                <h:panelGrid width="100%">
                                    <h:panelGrid columns="2">
                                        <p:commandButton value="Agregar Fotos" oncomplete="foto.show()" icon="icono-agregar" />
                                    </h:panelGrid>
                                    <p:dataTable id="dataTableFotos" value="#{locacionBean.fotos}" var="foto" paginator="true" rows="10" rowsPerPageTemplate="10,20" paginatorPosition="bottom" emptyMessage="No hay datos para mostrar" rowStyleClass="encima">
                                        <p:column headerText="Nombre">
                                            <h:outputText value="#{foto.nomImagen}" />
                                        </p:column>
                                        <p:column width="60">
                                            <p:commandButton title="Vista previa" update=":formVistaPrevia" action="#{locacionBean.cargarURL(foto)}" oncomplete="vp.show();" icon="icono-buscar"  />
                                            <p:commandButton title="Eliminar" icon="icono-eliminar" action="#{locacionBean.eliminar(locacion)}">
                                                <p:confirm header="ELIMINAR LOCACION" message="Va a eliminar el registro. ¿Desea continuar?" icon="icono-eliminar" />
                                            </p:commandButton>
                                        </p:column>
                                    </p:dataTable>
                                </h:panelGrid>
                                <p:separator />
                                <h:panelGrid>
                                    <p:commandButton value="Cerrar ventana" type="button" onclick="fotos.hide();" icon="icono-salir" />
                                </h:panelGrid>
                            </p:dialog>
                        </h:form>
                        <h:form id="formVistaPrevia">
                            <p:dialog id="vp" widgetVar="vp" resizable="false" modal="true" header="VISTA PREVIA" position="center" width="730" height="550">
                                <p:graphicImage value="/temp/#{locacionBean.nomFoto}" style="max-width: 690px; max-height: 500px" />
                                <p:separator />
                                <h:panelGrid>
                                    <p:commandButton value="Cerrar ventana" type="button" onclick="vp.hide();" icon="icono-salir" />
                                </h:panelGrid>
                            </p:dialog>
                        </h:form>
                        <h:form id="formFoto">
                            <p:dialog widgetVar="foto" header="CARGAR FOTOS" resizable="false" modal="true" width="600" height="500">
                                <p:fileUpload fileUploadListener="#{locacionBean.subirImagen}"
                                              label="Buscar fotos..."
                                              uploadLabel="Subir"
                                              cancelLabel="Cancelar"
                                              mode="advanced"
                                              multiple="true"
                                              update=":mensaje, :formFotos:dataTableFotos"
                                              auto="true"
                                              allowTypes="/(\.|\/)(gif|jpg|png)$/" />
                                <p:separator />
                                <h:panelGrid>
                                    <p:commandButton value="Cerrar ventana" type="button" onclick="foto.hide();" icon="icono-salir" />
                                </h:panelGrid>
                            </p:dialog>
                        </h:form>
                    </p:panel>
                </h:panelGrid>
            </ui:define>
        </ui:composition>
    </body>
</html>
